<!DOCTYPE html>
<html lang="zh" class="js csstransforms3d">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Hugo 0.93.0" />
    <meta name="description" content="Documentation for Hugo Learn Theme">
<meta name="author" content="Mathieu Cornic">

    <link rel="icon" href="/images/favicon.png" type="image/png">

    <title>VueRouter常用点整理 :: welcome to my blog</title>

    
    <link href="/css/nucleus.css?1648731304" rel="stylesheet">
    <link href="/css/fontawesome-all.min.css?1648731304" rel="stylesheet">
    <link href="/css/hybrid.css?1648731304" rel="stylesheet">
    <link href="/css/featherlight.min.css?1648731304" rel="stylesheet">
    <link href="/css/perfect-scrollbar.min.css?1648731304" rel="stylesheet">
    <link href="/css/auto-complete.css?1648731304" rel="stylesheet">
    <link href="/css/atom-one-dark-reasonable.css?1648731304" rel="stylesheet">
    <link href="/css/theme.css?1648731304" rel="stylesheet">
    <link href="/css/tabs.css?1648731304" rel="stylesheet">
    <link href="/css/hugo-theme.css?1648731304" rel="stylesheet">
    
    <link href="/css/theme-green.css?1648731304" rel="stylesheet">
    
    

    <script src="/js/jquery-3.3.1.min.js?1648731304"></script>

    <style>
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
    </style>
    
  </head>
  <body class="" data-url="/vue/vuerouter/">
    <nav id="sidebar" class="showVisitedLinks">



  <div id="header-wrapper">
    <div id="header">
      <a id="logo" href='/'>

<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">
<g>
	<path d="M35,0c9.6,0,17.9,3.4,24.7,10.3c6.8,6.8,10.3,15,10.3,24.7c0,9.7-3.4,17.9-10.3,24.7c-6.8,6.8-15,10.3-24.7,10.3
		c-9.7,0-17.9-3.4-24.7-10.3C3.4,52.8,0,44.6,0,34.9c0-9.6,3.4-17.9,10.3-24.7C17.1,3.4,25.3,0,35,0z M22.3,63.7
		c0.3-7.4,0.3-14.7,0-22.1c-2.1-0.4-4-0.4-5.9,0c-0.2,0.8-0.2,2.5-0.1,4.9c0.1,2.3,0,3.9-0.3,4.8c-1.7-0.6-2.7-2.1-3.1-4.6
		c-0.1-0.7-0.1-3.3-0.1-8c0-14.5-0.1-23-0.3-25.6c-3.6,4.1-5.6,7-5.9,8.5v10.9c0,4.5,0.1,8.1,0.2,10.9c0,0.4,0,1.3-0.1,2.8
		c-0.1,1.2,0,2.1,0.1,2.6c0.1,0.6,1.1,2.1,2.8,4.7C13.2,58.7,17.5,62.2,22.3,63.7z M44.6,65.4c0.3-5,0.2-12.9-0.1-23.6
		c-2.1-0.3-4.1-0.3-5.9,0c-0.2,2-0.2,5.1-0.1,9.5c0.1,4.3,0,7.5-0.1,9.5c-2.9,0.4-5,0.3-6.2-0.1c-0.2-5.6-0.2-15.2-0.1-28.7
		c0.1-12.4,0-21.8-0.3-28.3c-2.4,0.1-4.3,0.6-5.7,1.3c-0.1,7.7-0.2,17.7-0.1,30.1c0,16.5,0,26.6,0,30.3c2.3,1.1,5.4,1.7,9.4,1.7
		C38.9,66.9,42.1,66.4,44.6,65.4z M48.1,64.1c9.7-4.6,15.7-12,18-22.2c-1.8-0.2-3.8-0.3-6.1-0.3c-1.6,3.9-2.6,6.3-3.2,7.2
		c-1.1,1.7-2,2.5-2.7,2.5C54,46,54,39.1,54,30.5c0-11.5,0-18.4,0-20.9c-1.4-1.4-3.3-2.5-5.7-3.4C48.1,6.3,48,6.4,48,6.7
		c0,3.5,0,13.1,0,28.8C47.9,47.2,48,56.8,48.1,64.1z"/>
</g>
<g>
	<path d="M116.6,51.3h-29c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.6-0.7-1c-0.2-0.4-0.2-0.8-0.2-1.3V16.3h6.3
		V45h25.8V51.3z"/>
	<path d="M154.8,51.3h-22.9c-0.9,0-1.8-0.2-2.9-0.5c-1-0.3-2-0.8-2.9-1.5c-0.9-0.7-1.6-1.6-2.2-2.8c-0.6-1.1-0.9-2.5-0.9-4.2V19.5
		c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2h28.6v6.3h-25.4v19.8
		c0,0.8,0.2,1.5,0.7,1.9s1.1,0.7,1.9,0.7h22.9V51.3z M151.9,37h-20v-6.4h20V37z"/>
	<path d="M197.3,51.3H191v-8.6h-22.3v8.6h-6.3V33.8c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.7-5.5c1.6-1.5,3.4-2.8,5.5-3.6
		c2.1-0.9,4.5-1.3,7-1.3h14.3c0.4,0,0.9,0.1,1.2,0.2c0.4,0.2,0.7,0.4,1,0.7s0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2V51.3z
		 M168.7,36.4H191V22.6h-11.2c-0.2,0-0.6,0-1.2,0.1c-0.6,0.1-1.4,0.2-2.2,0.4c-0.8,0.2-1.7,0.6-2.6,1c-0.9,0.5-1.8,1.1-2.5,2
		c-0.8,0.8-1.4,1.9-1.9,3.1c-0.5,1.2-0.7,2.8-0.7,4.5V36.4z"/>
	<path d="M241.7,28.1c0,1.4-0.2,2.7-0.5,3.9c-0.4,1.1-0.8,2.1-1.5,3c-0.6,0.9-1.3,1.6-2.1,2.2c-0.8,0.6-1.6,1.1-2.5,1.5
		c-0.9,0.4-1.8,0.7-2.6,0.9c-0.9,0.2-1.7,0.3-2.5,0.3l13.3,11.5h-9.8l-13.2-11.5h-4.6v-6.3H230c0.8-0.1,1.5-0.2,2.2-0.5
		c0.7-0.3,1.2-0.6,1.7-1.1c0.5-0.5,0.9-1,1.1-1.6c0.3-0.6,0.4-1.4,0.4-2.2v-4c0-0.4,0-0.6-0.1-0.8c-0.1-0.2-0.2-0.3-0.3-0.4
		c-0.1-0.1-0.3-0.1-0.4-0.2c-0.2,0-0.3,0-0.4,0h-20.9v28.7h-6.3V19.5c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1
		c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2H234c1.4,0,2.6,0.3,3.6,0.8s1.8,1.2,2.4,1.9c0.6,0.8,1,1.6,1.3,2.5
		c0.3,0.9,0.4,1.7,0.4,2.5V28.1z"/>
	<path d="M285.1,48.6c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.6,0.5-1,0.7c-0.4,0.2-0.8,0.2-1.2,0.2
		c-0.4,0-0.8-0.1-1.2-0.2c-0.4-0.1-0.8-0.4-1.1-0.7l-23.2-24.2v24.7h-6.3V19c0-0.7,0.2-1.2,0.5-1.8c0.4-0.5,0.8-0.9,1.4-1.2
		c0.6-0.2,1.2-0.3,1.9-0.2s1.2,0.4,1.6,0.9l23.2,24.2V16.3h6.3V48.6z"/>
</g>
</svg>

</a>

    </div>
    
        <div class="searchbox">
    <label for="search-by"><i class="fas fa-search"></i></label>
    <input data-search-input id="search-by" type="search" placeholder="">
    <span data-search-clear=""><i class="fas fa-times"></i></span>
</div>

<script type="text/javascript" src="/js/lunr.min.js?1648731304"></script>
<script type="text/javascript" src="/js/auto-complete.js?1648731304"></script>
<script type="text/javascript">
    
        var baseurl = "\/";
    
</script>
<script type="text/javascript" src="/js/search.js?1648731304"></script>

    
  </div>
  

    <div class="highlightable">
    <ul class="topics">

        
          
          




 
  
    
    <li data-nav-id="/javascript/" title="— JavaScript" class="dd-item
        
        
        
        ">
      <a href="/javascript/">
          <b>1. </b>— JavaScript
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/">
          JS定时器应用
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/ajax/" title="Ajax简单介绍" class="dd-item
        
        
        
        ">
      <a href="/javascript/ajax/">
          Ajax简单介绍
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
          JS对象拷贝
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" class="dd-item
        
        
        
        ">
      <a href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/">
          JS中的内存机制
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" title="JS遍历方法总结" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">
          JS遍历方法总结
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/node.js/" title="— Node.js" class="dd-item
        
        
        
        ">
      <a href="/node.js/">
          <b>2. </b>— Node.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/node.js/koa%E5%9F%BA%E7%A1%80/" title="Koa创建本地服务器" class="dd-item ">
        <a href="/node.js/koa%E5%9F%BA%E7%A1%80/">
        Koa创建本地服务器
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/" title="Nunjucks模板引擎常用基础" class="dd-item ">
        <a href="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/">
        Nunjucks模板引擎常用基础
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/nodemailer/" title="Nodemailer实现邮箱注册" class="dd-item
        
        
        
        ">
      <a href="/node.js/nodemailer/">
          Nodemailer实现邮箱注册
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/" title="Node博客系统开发记录" class="dd-item
        
        
        
        ">
      <a href="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/">
          Node博客系统开发记录
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node-%E7%88%AC%E8%99%AB/" title="Node爬虫思路整理" class="dd-item
        
        
        
        ">
      <a href="/node.js/node-%E7%88%AC%E8%99%AB/">
          Node爬虫思路整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/cookiesession%E5%BA%94%E7%94%A8/" title="cookie,session实现登录验证" class="dd-item
        
        
        
        ">
      <a href="/node.js/cookiesession%E5%BA%94%E7%94%A8/">
          cookie,session实现登录验证
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/token%E5%AE%9E%E4%BE%8B/" title="Egg.js: token应用实例" class="dd-item
        
        
        
        ">
      <a href="/node.js/token%E5%AE%9E%E4%BE%8B/">
          Egg.js: token应用实例
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/cookie-%E5%92%8C-session/" title="koa应用cookie,session实例" class="dd-item ">
        <a href="/node.js/cookie-%E5%92%8C-session/">
        koa应用cookie,session实例
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/vue/" title="— Vue.js" class="dd-item
        parent
        
        
        ">
      <a href="/vue/">
          <b>3. </b>— Vue.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门" class="dd-item ">
        <a href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
        vue基础入门
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" class="dd-item ">
        <a href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
        vue组件传值总结
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/vue/vuerouter/" title="VueRouter常用点整理" class="dd-item
        parent
        active
        
        ">
      <a href="/vue/vuerouter/">
          VueRouter常用点整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/web/" title="— Web About" class="dd-item
        
        
        
        ">
      <a href="/web/">
          <b>4. </b>— Web About
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/web/indexeddb/" title="IndexedDB数据库常用函数封装" class="dd-item
        
        
        
        ">
      <a href="/web/indexeddb/">
          IndexedDB数据库常用函数封装
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/web/url%E5%A4%84%E7%90%86/" title="URL手动处理" class="dd-item
        
        
        
        ">
      <a href="/web/url%E5%A4%84%E7%90%86/">
          URL手动处理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/myimg/" title="— 杂 感 . . ." class="dd-item
        
        
        
        ">
      <a href="/myimg/">
          <b>5. </b>— 杂 感 . . .
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/myimg/myimage/" title="Myimages" class="dd-item
        
        
        
        ">
      <a href="/myimg/myimage/">
          Myimages
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
        
    </ul>

    
    
      <section id="shortcuts">
        <h3></h3>
        <ul>
          
              <li>
                  <a class="padding" href="https://gitee.com/wen-yun-li"><i class='fab fa-fw fa-github'></i> — Gitee</a>
              </li>
          
              <li>
                  <a class="padding" href="https://github.com/liwenyun"><i class='fab fa-fw fa-github'></i> — GitHub</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.runoob.com/"><i class='fas fa-fw fa-bookmark'></i>— 菜鸟教程</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.eggjs.org/zh-CN/intro/quickstart"><i class='fas fa-fw fa-bookmark'></i>— Egg.js 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.axios-http.cn/docs/intro"><i class='fas fa-fw fa-bookmark'></i>— Axios 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://v3.cn.vuejs.org/guide/introduction.html"><i class='fas fa-fw fa-bookmark'></i>— Vue.js 文档</a>
              </li>
          
        </ul>
      </section>
    

    
    <section id="prefooter">
      <hr/>
      <ul>
      

      
        <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> </a></li>
      
      </ul>
    </section>
    
    <section id="footer">
      <center>
    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download matcornic/hugo-theme-learn on GitHub">Download</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn" data-icon="octicon-star" data-show-count="true" aria-label="Star matcornic/hugo-theme-learn on GitHub">Star</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matcornic/hugo-theme-learn on GitHub">Fork</a>

    <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="https://getgrav.org">Grav</a> and <a href="https://gohugo.io/">Hugo</a></p>
</center>

<script async defer src="https://buttons.github.io/buttons.js"></script>

    </section>
  </div>
</nav>




        <section id="body">
        <div id="overlay"></div>
        <div class="padding highlightable">
              
              <div>
                <div id="top-bar">
                
                  
                  
                  
                  <div id="top-github-link">
                    <a class="github-link" title='' href="https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/vue/VueRouter/_index.zh.md" target="blank">
                      <i class="fas fa-code-branch"></i>
                      <span id="top-github-link-text"></span>
                    </a>
                  </div>
                  
                
                
                <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <span id="sidebar-toggle-span">
                        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                          <i class="fas fa-bars"></i>
                        </a>
                    </span>
                  
                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
                  
                  <span class="links">
                 
                 
                    
          
          
            
            
          
          
            
            
          
          
            <a href='/'>LIWENYUN BLOG</a> > <a href='/vue/'>— Vue.js</a> > VueRouter常用点整理
          
        
          
        
          
        
                 
                  </span>
                </div>
                
                    <div class="progress">
    <div class="wrapper">
<nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#1router-和-route">1.router 和 route</a></li>
        <li><a href="#2动态路由">2.动态路由</a></li>
        <li><a href="#3嵌套路由">3.嵌套路由</a></li>
        <li><a href="#4编程式导航">4.编程式导航</a></li>
        <li><a href="#5命名视图">5.命名视图</a></li>
        <li><a href="#6重定向和别名">6.重定向和别名</a></li>
        <li><a href="#7路由组件传参">7.路由组件传参</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>

                
              </div>
            </div>
            
        <div id="head-tags">
        
        </div>
        
        <div id="body-inner">
          
            <h1>
              
              VueRouter常用点整理
            </h1>
          

        



	<h3 id="1router-和-route">1.router 和 route</h3>
<ol>
<li>通过调用 app.use(router)，</li>
</ol>
<p>可以在任意组件中以&rsquo;this.$router&rsquo; 的形式访问它（VueRouter.createRouter创建的router），</p>
<p>并且以 &rsquo;this.$route&rsquo; 的形式访问当前路由。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>应用</th>
</tr>
</thead>
<tbody>
<tr>
<td>$router</td>
<td>return this.$route.params.username</td>
</tr>
<tr>
<td>$route</td>
<td>this.$router.push(&rsquo;/login')</td>
</tr>
</tbody>
</table>
<ol start="2">
<li>要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。</li>
</ol>
<h3 id="2动态路由">2.动态路由</h3>
<p><em>路径参数</em> 用冒号&rsquo; : &lsquo;表示。当一个路由被匹配时，它的 <em>params</em> 的值将在每个组件中以 &rsquo;this.$route.params&rsquo; 的形式暴露出来。</p>
<p>在同一个路由中设置有多个 <em>路径参数</em>，它们会映射到 &lsquo;$route.params&rsquo; 上的相应字段。</p>
<table>
<thead>
<tr>
<th>匹配模式</th>
<th>匹配路径</th>
<th>$route.params</th>
</tr>
</thead>
<tbody>
<tr>
<td>/users/:username</td>
<td>/users/eduardo</td>
<td>{ username: &rsquo;eduardo&rsquo; }</td>
</tr>
<tr>
<td>/users/:username/posts/:postId</td>
<td>/users/eduardo/posts/123</td>
<td>{ username: &rsquo;eduardo, postId: 123&rsquo; }</td>
</tr>
</tbody>
</table>
<p>$route.query 可以获取url中参数（如：http://www.website/home?name=user&amp;age=21）</p>
<h3 id="3嵌套路由">3.嵌套路由</h3>
<p>嵌套路由时也需要在父级组件里提供 <!-- raw HTML omitted --></p>
<p>嵌套路由里的 path 不要带&quot;/&quot;,因为&quot;/&ldquo;开头的嵌套路径将被视为根路径</p>
<p>当需要在访问 &lsquo;/user/eduardo&rsquo;  时，在 User 的 &lsquo;router-view&rsquo; 里面有所呈现，可以提供一个空的嵌套路径：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">routes</span> <span style="color:#f92672">=</span> [
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/user/:id&#39;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">component</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">User</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">children</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// 当 /user/:id 匹配成功
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#75715e">// UserHome 将被渲染到 User 的 &lt;router-view&gt; 内部
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      { <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>, <span style="color:#a6e22e">component</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">UserHome</span> },
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// ...其他子路由
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    ],
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>]
</span></span></code></pre></div><h3 id="4编程式导航">4.编程式导航</h3>
<p>1.<strong>this.$router.push</strong></p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><!-- raw HTML omitted --></td>
<td>router.push(&hellip;)</td>
</tr>
</tbody>
</table>
<p>点击 <!-- raw HTML omitted --> 相当于调用 router.push(&hellip;)</p>
<p>参数可以是一个字符串路径，或者一个描述地址的对象:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 字符串路径
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/users/eduardo&#39;</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 带有路径的对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/users/eduardo&#39;</span> })
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 命名的路由，并加上参数，让路由建立 url
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;user&#39;</span>, <span style="color:#a6e22e">params</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;eduardo&#39;</span> } })
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 带查询参数，结果是 /register?plan=private
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/register&#39;</span>, <span style="color:#a6e22e">query</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">plan</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;private&#39;</span> } })
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 带 hash，结果是 /about#team
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/about&#39;</span>, <span style="color:#a6e22e">hash</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;#team&#39;</span> })
</span></span></code></pre></div><p>如果提供了 path ，则 &lsquo;params&rsquo; 会被忽略， 需要提供路由的 &rsquo;name&rsquo; 或手写完整的带有参数的 path</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">username</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;eduardo&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 我们可以手动建立 url，但我们必须自己处理编码
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">`/user/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>) <span style="color:#75715e">// -&gt; /user/eduardo
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 同样
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">`/user/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span> }) <span style="color:#75715e">// -&gt; /user/eduardo
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;user&#39;</span>, <span style="color:#a6e22e">params</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">username</span> } }) <span style="color:#75715e">// -&gt; /user/eduardo
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// `params` 不能与 `path` 一起使用
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/user&#39;</span>, <span style="color:#a6e22e">params</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">username</span> } }) <span style="color:#75715e">// -&gt; /user
</span></span></span></code></pre></div><p>&lsquo;router.push&rsquo; 和所有其他导航方法都会返回一个 <em>Promise</em>，让我们可以等到导航完成后才知道是成功还是失败。</p>
<p>2.<strong>router.replace</strong></p>
<p>作用类似于 &lsquo;router.push&rsquo; ，唯一不同的是，它在导航时不会向 history 添加新记录.</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><!-- raw HTML omitted --></td>
<td>router.replace(&hellip;)</td>
</tr>
</tbody>
</table>
<p>也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">push</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/home&#39;</span>, <span style="color:#a6e22e">replace</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> })
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 相当于
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">replace</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/home&#39;</span> })
</span></span></code></pre></div><p>3.<strong>history</strong></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 向前移动一条记录，与 router.forward() 相同
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#ae81ff">1</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 返回一条记录，与router.back() 相同
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 前进 3 条记录
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#ae81ff">3</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 如果没有那么多记录，静默失败
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#f92672">-</span><span style="color:#ae81ff">100</span>)
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">go</span>(<span style="color:#ae81ff">100</span>)
</span></span></code></pre></div><h3 id="5命名视图">5.命名视图</h3>
<p>有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">router</span><span style="color:#f92672">-</span><span style="color:#a6e22e">view</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;view left-sidebar&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;LeftSidebar&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/router-view&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">router</span><span style="color:#f92672">-</span><span style="color:#a6e22e">view</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;view main-content&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/router-view&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">router</span><span style="color:#f92672">-</span><span style="color:#a6e22e">view</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;view right-sidebar&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;RightSidebar&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/router-view&gt;</span>
</span></span></code></pre></div><p>一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 &lsquo;components&rsquo; 配置 (带上 <strong>s</strong>)：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">router</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">createRouter</span>({
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">history</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">createWebHashHistory</span>(),
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">routes</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>    {
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/&#39;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">Home</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// LeftSidebar: LeftSidebar 的缩写
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#a6e22e">LeftSidebar</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// 它们与 `&lt;router-view&gt;` 上的 `name` 属性匹配
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#a6e22e">RightSidebar</span>,
</span></span><span style="display:flex;"><span>      },
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>  ],
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div><h3 id="6重定向和别名">6.重定向和别名</h3>
<p>开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数</p>
<p>重定向是指当用户访问 &lsquo;/home&rsquo; 时，URL 会被 &lsquo;/ &lsquo;替换，然后匹配成&rsquo;/&rsquo;。那么什么是别名呢？</p>
<p><strong>将 &lsquo;/&rsquo; 别名为 &lsquo;/home&rsquo;，意味着当用户访问 &lsquo;/home&rsquo; 时，URL 仍然是&rsquo;/home&rsquo; ，但会被匹配为用户正在访问 &lsquo;/&rsquo;。</strong></p>
<h3 id="7路由组件传参">7.路由组件传参</h3>
<p>当 &lsquo;props&rsquo; 设置为&rsquo;true&rsquo; 时，&lsquo;route.params&rsquo; 将被设置为组件的 &lsquo;props&rsquo;。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">User</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;id&#39;</span>],
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">template</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&lt;div&gt;User {{ id }}&lt;/div&gt;&#39;</span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">routes</span> <span style="color:#f92672">=</span> [{ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/user/:id&#39;</span>, <span style="color:#a6e22e">component</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">User</span>, <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> }]
</span></span></code></pre></div><p>对于有命名视图的路由，你必须为每个命名视图定义 &lsquo;props&rsquo; 配置：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">routes</span> <span style="color:#f92672">=</span> [
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/user/:id&#39;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">User</span>, <span style="color:#a6e22e">sidebar</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">Sidebar</span> },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>, <span style="color:#a6e22e">sidebar</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span> }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>]
</span></span></code></pre></div><p>当 &lsquo;props&rsquo; 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">routes</span> <span style="color:#f92672">=</span> [
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/promotion/from-newsletter&#39;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">component</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">Promotion</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">newsletterPopup</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span> }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>]
</span></span></code></pre></div><p>你可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">routes</span> <span style="color:#f92672">=</span> [
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;/search&#39;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">component</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">SearchUser</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">route</span> =&gt; ({ <span style="color:#a6e22e">query</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">route</span>.<span style="color:#a6e22e">query</span>.<span style="color:#a6e22e">q</span> })
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>]
</span></span><span style="display:flex;"><span><span style="color:#75715e">//URL /search?q=vue 将传递 {query: &#39;vue&#39;} 作为 props 传给 SearchUser 组件。
</span></span></span></code></pre></div>




<footer class=" footline" >
	
</footer> 

         
        </div>
        

      </div>

    <div id="navigation">
        
        

        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
            
        

        


	 
	 
		
			<a class="nav nav-prev" href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结"> <i class="fa fa-chevron-left"></i></a>
		
		
			<a class="nav nav-next" href="/web/" title="— Web About" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
		
	
    </div>

    </section>

    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
    </div>
    <script src="/js/clipboard.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.jquery.min.js?1648731304"></script>
    <script src="/js/jquery.sticky.js?1648731304"></script>
    <script src="/js/featherlight.min.js?1648731304"></script>
    <script src="/js/highlight.pack.js?1648731304"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="/js/modernizr.custom-3.6.0.js?1648731304"></script>
    <script src="/js/learn.js?1648731304"></script>
    <script src="/js/hugo-learn.js?1648731304"></script>
    
        
            <script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
        
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105947713-1', 'auto');
  ga('send', 'pageview');

</script>
  </body>
</html>
 